<template>
    <div>
        <h2>销售总量</h2>
        <div ref="chart" class="chart"></div>
    </div>
</template>
<script setup>
import { ref, inject, onMounted } from 'vue'
import { useDebouncedResize } from '@/utils/hooks/useDebouncedResize'
import { useEChart } from '@/utils/hooks/useEchart'

const echarts = inject('echarts')
const axios = inject('axios')
const chart = ref(null)

const data = ref(null)
const xData = ref(null)
const yData = ref(null)

// 使用抽离的echarts Hook
const { initChart, disposeChart, getInstance, resizeChart } = useEChart()

const getSellData = async () => {
    const res = await axios.get('/one/data')
    data.value = res.data.data.chartData
    xData.value = data.value.map((item) => item.title)
    yData.value = data.value.map((item) => item.num)
}

onMounted(async () => {
    await getSellData()
    const option = {
        xAxis: {
            type: 'value',
            // 配置坐标轴线颜色
            axisLine: {
                lineStyle: {
                    color: '#fff',
                },
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                },
            },
        },
        yAxis: {
            type: 'category',
            data: xData.value,
            axisLine: {
                lineStyle: {
                    color: '#fff',
                },
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                },
            },
            axisTick: {
                show: true, // 显示 Y 轴刻度线
                alignWithLabel: false, // 刻度线不与标签对齐
                length: 5, // 刻度线的长度，可以根据需要调整
                inside: false, // 刻度线向外突出
                lineStyle: {
                    color: '#fff', // 刻度线颜色
                },
            },
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'line',
            },
        },
        // 配置图标的位置 不包含坐标轴中的文字
        grid: {
            top: '3%',
            left: '1%',
            bottom: '3%',
            right: '6%',
            containLabel: true, // 包含坐标轴中的文字
        },
        series: [
            {
                type: 'bar',
                data: yData.value,
                label: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        color: '#fff',
                        fontSize: 10,
                    },
                },
                itemStyle: {
                    // 顺时针方向设置
                    borderRadius: [0, 20, 20, 0],
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [
                            { offset: 0, color: '#005eaa' },
                            { offset: 0.5, color: '#339ca8' },
                            { offset: 1, color: '#cda819' },
                        ],
                    },
                },
            },
        ],
    }
    initChart(echarts, chart, option)
})

// 使用抽离的防抖resize Hook
useDebouncedResize(resizeChart, 500)
</script>

<style lang="less" scoped>
h2 {
    /* 48像素 */
    height: 0.6rem;
    color: #fff;
    line-height: 0.6rem;
    text-align: center;
    font-size: 0.25rem;
}
.chart {
    /* 高度360 */
    height: 4.5rem;
    // background-color: gray;
}
</style>
